import React, { Component } from 'react'
import "./index.css"

export default class index extends Component {
    render() {
        return (
            <div className='parent'>
                <h2>propsRender</h2>
                {/* render 等于一个函数，返回一个组件，接收到参数传递给子组件 */}
                <A render={(carName) => <B carName={carName} />}></A>
            </div>
        )
    }
}
class A extends Component {
    state = {
        carName: "奔驰"
    }
    render() {
        const { carName } = this.state
        return (
            <div className='child1'>
                我是A组件<br />
                我的汽车是：{carName}
                {/* 在A组件中调用props上的render方法渲染返回的组件并传递参数 */}
                {this.props.render(carName)}
            </div>
        )
    }
}
class B extends Component {
    render() {
        return (
            <div className='child2'>
                我是B组件<br />
                从A组件接收到的名字是：{this.props.carName}
            </div>
        )
    }
}
